<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>sentox-ValidateBox</title>
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/easyui.css" />
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/font-awesome.min.css">

		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	</head>

	<body style="margin:10px;">
		<h2>Validate On Blur</h2>
		<p>Active validation on first blur event.</p>
		<div style="margin:20px 0;"></div>
		<div class="easyui-panel" title="Register" style="width:400px;padding:10px 60px 20px 60px">
			<table cellpadding="5">
				<tr>
					<td>User Name:</td>
					<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'length[3,10]',novalidate:true"></td>
				</tr>
				<tr>
					<td>Email:</td>
					<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'email',novalidate:true"></td>
				</tr>
				<tr>
					<td>Birthday:</td>
					<td><input class="easyui-datebox textbox" data-options="required:true,novalidate:true"></td>
				</tr>
				<tr>
					<td>URL:</td>
					<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'url',novalidate:true"></td>
				</tr>
				<tr>
					<td>Phone:</td>
					<td><input class="easyui-validatebox textbox" data-options="required:true,novalidate:true"></td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			$(function(){
				$('.validatebox-text').bind('blur', function(){
					$(this).validatebox('enableValidation').validatebox('validate');
				});
			})
		</script>
		<style scoped="scoped">
			.textbox{
				height:20px;
				margin:0;
				padding:0 2px;
				box-sizing:content-box;
			}
		</style>
		<!----------------------------------------------------------------------------------------------------------------------------->
		
		<h2>Basic ValidateBox</h2>
		<p>It's easy to add validate logic to a input box.</p>
		<div style="margin:20px 0;"></div>
		<div class="easyui-panel" title="Register" style="width:400px;padding:10px 60px 20px 60px">
			<table cellpadding="5">
				<tr>
					<td>User Name:</td>
					<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'length[3,10]'"></td>
				</tr>
				<tr>
					<td>Email:</td>
					<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'email'"></td>
				</tr>
				<tr>
					<td>Birthday:</td>
					<td><input class="easyui-datebox textbox"></td>
				</tr>
				<tr>
					<td>URL:</td>
					<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'url'"></td>
				</tr>
				<tr>
					<td>Phone:</td>
					<td><input class="easyui-validatebox textbox" data-options="required:true"></td>
				</tr>
			</table>
		</div>
		<style scoped="scoped">
			.textbox{
				height:20px;
				margin:0;
				padding:0 2px;
				box-sizing:content-box;
			}
		</style>
		<!----------------------------------------------------------------------------------------------------------------------------->
		
		<h2>Custom ValidateBox Tooltip</h2>
		<p>This sample shows how to display another tooltip message on a valid textbox.</p>
		<div style="margin:20px 0;"></div>
		<div class="easyui-panel" title="Register" style="width:400px;padding:10px 60px 20px 60px">
			<table cellpadding="5">
				<tr>
					<td>User Name:</td>
					<td><input class="easyui-validatebox textbox" data-options="prompt:'Enter User Name.',required:true,validType:'length[3,10]'"></td>
				</tr>
				<tr>
					<td>Email:</td>
					<td><input class="easyui-validatebox textbox" data-options="prompt:'Enter a valid email.',required:true,validType:'email'"></td>
				</tr>
				<tr>
					<td>Birthday:</td>
					<td><input class="easyui-datebox"></td>
				</tr>
				<tr>
					<td>URL:</td>
					<td><input class="easyui-validatebox textbox" data-options="prompt:'Enter your URL.',required:true,validType:'url'"></td>
				</tr>
				<tr>
					<td>Phone:</td>
					<td><input class="easyui-validatebox textbox" data-options="prompt:'Enter your phone number.',required:true"></td>
				</tr>
			</table>
		</div>
		<style scoped="scoped">
			.textbox{
				height:20px;
				margin:0;
				padding:0 2px;
				box-sizing:content-box;
			}
		</style>
		<script>
			$(function(){
				$('input.easyui-validatebox').validatebox({
					tipOptions: {	// the options to create tooltip
						showEvent: 'mouseenter',
						hideEvent: 'mouseleave',
						showDelay: 0,
						hideDelay: 0,
						zIndex: '',
						onShow: function(){
							if (!$(this).hasClass('validatebox-invalid')){
								if ($(this).tooltip('options').prompt){
									$(this).tooltip('update', $(this).tooltip('options').prompt);
								} else {
									$(this).tooltip('tip').hide();
								}
							} else {
								$(this).tooltip('tip').css({
									color: '#000',
									borderColor: '#CC9933',
									backgroundColor: '#FFFFCC'
								});
							}
						},
						onHide: function(){
							if (!$(this).tooltip('options').prompt){
								$(this).tooltip('destroy');
							}
						}
					}
				}).tooltip({
					position: 'right',
					content: function(){
						var opts = $(this).validatebox('options');
						return opts.prompt;
					},
					onShow: function(){
						$(this).tooltip('tip').css({
							color: '#000',
							borderColor: '#CC9933',
							backgroundColor: '#FFFFCC'
						});
					}
				});
			});
		</script>
		<!----------------------------------------------------------------------------------------------------------------------------->
		
	</body>

</html>